<template>
  <div>
    <el-card>
      <div>
        <el-table style="width: 100%; width: 100%; margin: 10px 0px" border :data="skuData">
          <el-table-column label="序号" width="80px" align="center" type="index" />
          <el-table-column label="名称" align="" prop="skuName"> </el-table-column>
          <!-- show-overflow-tooltip 可以让溢出的文字,在我们光标聚焦后出现提示框展示内容 -->
          <el-table-column label="描述" align="" prop="skuDesc" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="图片" align="" prop="">
            <template #="{ row }">
              <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column label="重量" align="" prop="price"> </el-table-column>
          <el-table-column label="价格" align="" prop="price"> </el-table-column>
          <el-table-column label="操作" align="">
            <template #="{ row }">
              <el-button
                type="primary"
                :icon="row.isSale === 1 ? 'Bottom' : 'Top'"
                size="small"
                title="上/下架SKU"
                @click="updataSkuSale(row)"
                v-has="'btn.Sku.updown'"
              ></el-button>
              <el-button
                type="primary"
                icon="Edit"
                size="small"
                title="修改SKU"
                @click="updataSpu(row)"
                v-has="'btn.Sku.update'"
              ></el-button>
              <el-button
                type="primary"
                icon="View"
                size="small"
                title="查看SKU列表"
                v-has="'btn.Sku.detail'"
                @click="OpenDrawer(row)"
              ></el-button>
              <el-button
                type="primary"
                icon="delete"
                size="small"
                title="删除SKU列表"
                v-has="'btn.Sku.remove'"
                @click="delSkuList(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <pagination
          v-model:page-no="pageData.pageNo"
          v-model:limit="pageData.limit"
          v-model:total="pageData.total"
          :get-pag-data="getSkuList"
          :page-sizes="[10, 20, 30, 40]"
        ></pagination>
      </div>
    </el-card>
  </div>
  <div>
    <el-drawer v-model="drawer" title="查看商品详情" size="30%">
      <div>
        <ElForm>
          <ElFormItem label="名称" label-width="80px">
            <ElInput disabled :model-value="skuParam.skuName"></ElInput>
          </ElFormItem>
          <ElFormItem label="描述" label-width="80px">
            <ElInput disabled :model-value="skuParam.skuDesc"></ElInput>
          </ElFormItem>
          <ElFormItem label="价格" label-width="80px">
            <ElInput disabled :model-value="skuParam.price"></ElInput>
          </ElFormItem>
          <ElFormItem label="平台属性" label-width="80px">
            <ElTag
              v-for="item in skuParam.skuAttrValueList"
              :key="item.id"
              style="margin-right: 5px"
            >
              {{ item.valueName }}
            </ElTag>
          </ElFormItem>
          <ElFormItem label="销售属性" label-width="80px">
            <ElTag
              v-for="item in skuParam.skuSaleAttrValueList"
              :key="item.id"
              style="margin-right: 5px"
            >
              {{ item.saleAttrValueName }}
            </ElTag>
          </ElFormItem>
          <ElFormItem label="商品图片" label-width="80px">
            <el-carousel height="200px" :interval="4000" type="card" style="width: 100vh">
              <el-carousel-item v-for="item in skuParam.skuImageList" :key="item.id">
                <img :src="item.imgUrl" alt="" style="width: 100%; height: 100%" />
              </el-carousel-item>
            </el-carousel>
          </ElFormItem>
        </ElForm>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup name="SKu">
import { onMounted, ref } from 'vue'
import {
  reqCancelSale,
  reqDelSkuList,
  reqSaveSaleSku,
  reqSkuInfo,
  reqSkuList
} from '@/API/product/sku'
import { SkuData } from '@/API/product/spu/type'
import { time } from 'console'
let drawer = ref(false)
let pageData = ref({
  pageNo: 1,
  limit: 10,
  total: 1
})
let skuData = ref<SkuData[]>([])
let skuParam = ref<SkuData>()
const getSkuList = async (page = 1) => {
  pageData.value.pageNo = page
  let result = await reqSkuList(pageData.value.pageNo, pageData.value.limit)
  if (result.code == 200) {
    pageData.value.total = result.data.total
    skuData.value = result.data.records
  }
}
const OpenDrawer = async (row: SkuData) => {
  skuParam.value = {}
  drawer.value = true
  let result = await reqSkuInfo(row.id)
  if (result.code == 200) {
    skuParam.value = result.data
  } else {
    console.log(result.message)
  }
}
const delSkuList = async (row: SkuData) => {
  ElMessageBox.confirm('确定删除Sku列表数据吗?', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      let result = await reqDelSkuList(row.id)
      if (result.code == 200) {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        getSkuList()
      } else {
        console.log(result.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消'
      })
    })
}
const updataSkuSale = async (row: SkuData) => {
  /* 根据isSale的属性是否为1判断是否已经上架,1为上架,反之 */
  if (row.isSale == 1) {
    await reqCancelSale(row.id)
    ElMessage({ type: 'success', message: '下架成功' })
    getSkuList(pageData.value.pageNo)
  } else {
    await reqSaveSaleSku(row.id)
    ElMessage({ type: 'success', message: '上架成功' })
    getSkuList(pageData.value.pageNo)
  }
}
const updataSpu = (row: SkuData) => {
  console.log('程序员还没更新捏')
}
onMounted(() => {
  getSkuList()
})
</script>

<style scoped></style>
